<template>
  <div class="setprocess_steps">
    <div class="setprocess_grid">
      <div class="sps_title">医院机房配置操作流程</div>
      <div class="sps_box">
        <el-steps :active="stepActive">
          <el-step
            v-for="(item, index) in processRoomObj"
            :key="index"
          >
            <div slot="icon" :class="'sps_step_icon sps_step_icon'+item.class"><i :class="item.icon"></i></div>
            <div
              slot="title"
              :class="'sps_step_title sps_step_title'+item.class+` ${calPermissionClass(item.permission)}`"
              @click="gotoRouter(item)">
              {{index+1}}、{{item.title}}
            </div>
            <div slot="description" class="sps_step_desc">
              <div>{{item.desc}}</div>
              <div class="set_btn" @click="gotoRouter(item)"><span>去设置<i class="el-icon-arrow-right"></i></span></div>
            </div>
          </el-step>
        </el-steps>
      </div>
    </div>
    <div class="setprocess_grid">
      <div class="sps_title">号源基本设置操作流程</div>
      <div class="sps_box">
        <el-steps :active="stepActive">
          <el-step
            v-for="(item, index) in processAppoObj"
            :key="index"
          >
            <div slot="icon" :class="'sps_step_icon sps_step_icon'+item.class"><i :class="item.icon"></i></div>
            <div
              slot="title"
              :class="'sps_step_title sps_step_title'+item.class+` ${calPermissionClass(item.permission)}`"
              @click="gotoRouter(item)">
              {{index+1}}、{{item.title}}
            </div>
            <div slot="description" class="sps_step_desc">
              <div>{{item.desc}}</div>
              <div class="set_btn" @click="gotoRouter(item)"><span>去设置<i class="el-icon-arrow-right"></i></span></div>
            </div>
          </el-step>
        </el-steps>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getExpires
} from '@/utils/auth'
import aes from '@/utils/aes'
export default {
  data() {
    return {
      stepActive: -1,
      timer: null,
      processRoomObj: [
        {
          origin: false,
          title: '医疗机构添加',
          desc: '对新医院的首次添加，注：如没有权限，请联系管理员设置添加',
          router: '/hospitalsetting/hospital',
          class: '1',
          icon: 'fa fa-hospital-o',
          permission: 'YJYY10005001'
        }, {
          origin: true,
          title: '院区和机房增加',
          desc: '新增检查设备机房',
          router: '/business/roommanage',
          class: '2',
          icon: 'fa fa-h-square',
          permission: 'YJYY10005001'
        }, {
          origin: true,
          title: '预约时令计划设置',
          desc: '维护时令班次时间，新增医院默认会生成默认班次时间',
          router: '/appointmaintain/setting',
          class: '3',
          icon: 'fa fa-cog',
          permission: 'YJYY10002032'
        }, {
          origin: true,
          title: 'HIS申请部位维护',
          desc: '维护HIS申请部位，预约规则及号源参数可根据部位过滤',
          router: '/appointmaintain/hismanagement',
          class: '4',
          icon: 'fa fa-database',
          permission: 'YJYY10002033'
        }, {
          origin: true,
          title: '影像号维护',
          desc: '设置检查设备的影像号前缀符号',
          router: '/business/imageMaintain',
          class: '5',
          icon: 'fa fa-edit',
          permission: 'YJYY10005003'
        }, {
          origin: true,
          title: '访问号维护',
          desc: '设置医院的访问号前缀',
          router: '/business/accessMaintain',
          class: '6',
          icon: 'fa fa-window-restore',
          permission: 'YJYY10005004'
        }
      ],
      processAppoObj: [
        {
          origin: true,
          title: '预约规则确认与设置',
          desc: '注：限制部位需与HIS电子申请单部位一致',
          router: '/appointmaintain/rulessetting',
          class: '6',
          icon: 'fa fa-bars',
          permission: 'YJYY10002034'
        }, {
          origin: true,
          title: '机房号源模板设置',
          desc: '机房号源统一模板设置后，每日号源根据模板设置自动生成；号源手动设置或从模板导入',
          router: '/appointmaintain/template',
          class: '3',
          icon: 'fa fa-sliders',
          permission: 'YJYY10002031'
        }, {
          origin: true,
          title: '机房号源预约列表管理',
          desc: '通过号源预约列表可对每日产生的号源进行单独控制，如：当日号源数量增加减少、暂停预约、节假日、机器故障',
          router: '/schedule/manage',
          class: '5',
          icon: 'fa fa-th',
          permission: 'YJYY10001002'
        }, {
          origin: true,
          title: '号源开放预览与测试',
          desc: '号源开放后登记预约、临床预约的测试',
          router: '/schedule/publish',
          class: '4',
          icon: 'fa fa-table',
          permission: 'YJYY10001001'
        }
      ]
    }
  },
  mounted() {
    // this.stepInit()
  },
  methods: {
    stepInit() {
      let outCount = 0
      let count = 0
      this.timer = setInterval(() => {
        count++
        console.log(count)
        outCount++
        this.stepActive = count
        if (count >= 6) {
          count = 0
        }
        if (outCount >= 24) {
          clearInterval(this.timer)
          this.timer = null
          outCount = 0
          count = 0
        }
      }, 2000)
    },
    // 路由
    gotoRouter(data) {
      const permission = data.permission
      const tags = this.$store.state.user.tags
      if (permission && tags.indexOf(permission) === -1) {
        this.$message.warning('暂无权限！')
        return false
      }
      if (data.origin) {
        this.$router.push(data.router)
      } else {
        this.gotoAddHosp(data.router)
      }
    },
    // 设置新增医院，单点登录项目路由
    gotoAddHosp(path) {
      let tokenData = {
        accessToken: this.$store.state.user.token,
        expires: getExpires()
      }
      // 跳转设置医院，直接删除本地缓存医院列表数据（医院列表、排班组件选项暂存数据、用户权限医院列表数据）
      this.$store.dispatch('user/removeLocalInfo')

      const tokenEncrypt = encodeURIComponent(aes.AESEncrypt(JSON.stringify(tokenData)))
      const _path = encodeURIComponent(path)
      window.open(`${window.g.YTHURL}?token=${tokenEncrypt}&redirect=${_path}`, '_blank')
    },
    // 判断权限样式
    calPermissionClass(permission) {
      const tags = this.$store.state.user.tags
      if (permission && tags && tags.indexOf(permission) === -1) {
        return ' permission_none'
      }
      return ''
    }
  }
}
</script>

<style lang="scss" scoped>
.setprocess_steps{
  padding: 20px 0;
  .setprocess_grid{
    margin-bottom: 40px;
  }
  .sps_title{
    padding-left: 6px;
    font-size: 14px;
    line-height: 1.2em;
    border-left: solid 4px #f00;
  }
  .sps_box{
    margin: 20px 0;
    /deep/ .el-step__icon{
      width: 36px;
      height: 36px;
      font-size: 16px;
    }
    /deep/ .el-step.is-horizontal .el-step__line{
      top: 17px;
    }
  }
}
.sps_step_icon{
  &.sps_step_icon1{
    color: #e93c3c;
  }
  &.sps_step_icon2{
    color: #ff951c;
  }
  &.sps_step_icon3{
    color: #8a0cb1;
  }
  &.sps_step_icon4{
    color: #0cb128;
  }
  &.sps_step_icon5{
    color: #0c74b1;
  }
  &.sps_step_icon6{
    color: #0cb1a9;
  }
}
.sps_step_title{
  // font-weight: bold;
  font-size: 16px;
  line-height: 1.4em;
  margin: 12px 0;
  cursor: pointer;
  &.sps_step_title1{
    color: #e93c3c;
  }
  &.sps_step_title2{
    color: #ff951c;
  }
  &.sps_step_title3{
    color: #8a0cb1;
  }
  &.sps_step_title4{
    color: #0cb128;
  }
  &.sps_step_title5{
    color: #0c74b1;
  }
  &.sps_step_title6{
    color: #0cb1a9;
  }
}
.sps_step_desc{
  color: #666;
  min-height: 80px;
  position: relative;
  padding-bottom: 20px;
  .set_btn{
    position: absolute;
    right: 4px;
    bottom: 4px;
    font-size: 12px;
    color: #ccc;
    cursor: pointer;
    &:hover{
      text-decoration: underline;
    }
  }
  &:hover .set_btn{
    display: block;
    color: #00C0EF;
  }
}

.permission_none{
  opacity: 0.5;
}
</style>
